<template>
  <el-dialog :close-on-click-modal="false" v-model="visible" title="绑定应用" @close="resetForm" width="60%">
    <el-table
      v-loading="editLoading"
      :data="tableData"
      ref="tableRef"
      max-height="64vh"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column prop="name" label="应用名称" align="center" />
      <el-table-column prop="appIconUrl" label="应用图标" align="center">
        <template #default="scope">
          <span class="appIcon">
            <img v-if="scope.row.appIconUrl" :src="scope.row.appIconUrl" alt="" />
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="修改时间" align="center">
        <template #default="scope">
          {{ scope.row.updateTime ? dayjs(scope.row.updateTime).format('YYYY-MM-DD HH:mm:ss') : '' }}
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end" style="padding-top: 20px;">
      <el-pagination
        background
        :layout="paginationData.layout"
        :page-sizes="paginationData.pageSizes"
        :total="paginationData.total"
        :page-size="paginationData.pageSize"
        :currentPage="paginationData.currentPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :small="true"
      />
    </div>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="handleCreate" :loading="submitBtnLoading">确认</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
import { usePagination } from '@/hooks/usePagination'
import { appManagerList, bindAppManager } from '@/api/system/app'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'

const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const searchData = reactive({
  name: ''
})
const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  visible: {
    type: Boolean,
    default: false
  }
})
const tableData = ref([])
const emit = defineEmits(['update:visible', 'create', 'update'])
const formRef = ref(null)
const tableRef = ref(null)
const formRules = reactive({
  name: [{ required: true, trigger: 'blur', message: '请输入分类名称' }]
})
const handleCreate = () => {
  let selectde = tableRef.value.getSelectionRows()
  if (selectde.length === 0) {
    ElMessage.error('请选择应用')
    return
  }
  submitBtnLoading.value = true
  bindAppManager({ appTypeId: props.id, appManagerId: selectde[0].appManagerId })
    .then(() => {
      ElMessage.success('绑定成功')
      emit('addSuccess')
    })
    .finally(() => {
      submitBtnLoading.value = false
    })
}
const resetForm = () => {
  emit('update:visible')
  // formRef.value.resetFields()
  tableData.value = []
}
const submitBtnLoading = ref(false)
const editLoading = ref(false)
watch(
  () => props.visible,
  async (newValue, oldValue) => {
    if (newValue) {
      editLoading.value = true
      appManagerList(searchData, {
        currentPage: paginationData.currentPage,
        size: paginationData.pageSize
      })
        .then((res) => {
          paginationData.total = parseInt(res.data.total)
          tableData.value = res.data.records
        })
        .catch(() => {
          tableData.value = []
        })
        .finally(() => {
          editLoading.value = false
        })
    }
  }
)
// const tableRowClick = (row, column, event) => {
//   tableData.value.forEach((item) => {
//     tableRef.value.toggleRowSelection(item, false)
//   })
//   if (column.label !== '操作') {
//     tableRef.value.toggleRowSelection(row)
//   }
// }
const selectionChange = (selection) => {
  if (selection.length >= 2) {
    tableData.value.forEach((item) => {
      tableRef.value.toggleRowSelection(item, false)
    })
    tableRef.value.toggleRowSelection(selection[selection.length - 1])
  }
}
</script>
<style lang="scss" scoped>
.appIcon {
  display: flex;
  justify-content: center;
  img {
    height: 50px;
    width: 80px;
  }
}
</style>
